<template>
  <input v-model="num" />
  {{ num }}
</template>

<script lang="ts">
import { customRef } from "vue";

export default {
  setup() {
    let myRef = function (value: any, delay: number) {
      return customRef((track, trigger) => {
        let timer: any = null;
        return {
          get() {
            track(); //告诉vue这个数据是要被追踪的
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              console.log("向服务器发起请求", newValue);
              trigger(); //通知vue更新界面
            }, delay);
          },
        };
      });
    };

    let num = myRef("", 1000);

    return { num };
  },
};
</script>

<style scoped></style>
